<template>
  <div style="background: #f5f5f5;">
    <pageTop :text="text"></pageTop>
    <div @click="blank">
      <slideBar></slideBar>
      <div class="body">
        <div class="newsTitle">{{newsDetail.title}}</div>
        <p class="nameTime">作者：{{newsDetail.author}} <span>时间：{{time | formatDate}}</span></p>
        <!--<div v-if="newsDetail.image"
             style="margin: 0px auto;width: 92vw;height: 50vw;margin-top: 2vw !important;margin-bottom: -2vw">
          <img :src="newsDetail.image" alt="" style="width: 100%;height: 100% ;">
        </div>-->
        <div style="width: 92vw;margin: 0px auto;" class="container">
          <p class="content"  v-html="$options.filters.unescape(newsDetail.content)">
            {{newsDetail.content}}
          </p>
        </div>
      </div>

      <gotop></gotop>
    </div>
    <pageBottom></pageBottom>
  </div>
</template>

<script>
  import pageTop from '../components/pageTop'
  import slideBar from '../components/slideBar'
  import gotop from '../components/public/goTop'
  import pageBottom from '../components/pageBottom'
  import {formatDate} from '../assets/js/date'
  export default {
    name: "newsDetail",
    components:{
      pageTop,
      slideBar,
      gotop,
      pageBottom,
    },
    mounted(){
      window.onload=function(){
        var imgs=document.getElementsByTagName('img');
        for(var i=0;i<imgs.length;i++){
          imgs[i].setAttribute('class','imgWidth');
        }
      }
    },
    filters: {
      unescape:function (html) {
        return html
          .replace(html ? /&(?!#?\w+;)/g : /&/g, '&amp;')
          .replace(/&lt;/g, "<")
          .replace(/&gt;/g, ">")
          .replace(/&quot;/g, "\"")
          .replace(/&#39;/g, "\'");
      },
      formatDate: function (value) {
        let date = new Date(value *1000);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? ('0' + MM) : MM;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        let h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        let m = date.getMinutes();
        m = m < 10 ? ('0' + m) : m;
        let s = date.getSeconds();
        s = s < 10 ? ('0' + s) : s;
        return y + '-' + MM + '-' + d + ' ';
      }
    },
    data(){
      return{
        text:'新闻中心',
        newsDetail:[],
        time:[],
        /*id:'$route.params.id',*/
      }
    },
    created(){
      const id = this.$route.params.newsId;

      var that=this;
      this.$http({
        url:'/offcial/index.php/index/Acticle/NewsContenr',
        method:'post',
        data:{
          nid:id,
          time:this._globe.time1,
          device_id:this._globe.device_id,
          version:this._globe.version,
          platform:this._globe.platform,
          token:this._globe.token1,
        }
      })
        .then(function (response) {
          /*console.log(response);*/
          const resData=response.data;
          if(resData.code==1){
            that.newsDetail = resData.data;
            that.time =  resData.data.create_time;
           /* console.log(that.newsDetail);*/
          }
        })
        .catch(function (response) {
          console.log(response);
        })
    },
    methods:{
      getParams () {
        // 取到路由带过来的参数
        var routerParams = this.$route.params.id
        // 将数据放在当前组件的数据内
        this.id = routerParams
      },
      blank(){
        $("#containers").css(
          {"transform":"translateX(0vw)","transition":"transform .5s"});
      },
      menu(){
        $("#containers").css(
          {"transform":"translateX(72vw)","transition":"transform .5s"});
      }
    },
  }
</script>

<style scoped lang="scss">

  .container{
    img{
      width: 100%;
    }
  }
  .body{
    width: 100vw;
    height:  auto;
    background: #fff;
    border-top: 1px solid #f5f5f5;
      img{
        width: 100vw;
        height: 30vw;
      }
      .newsTitle{
        font-size: 20px;
        color: #333;
        text-align: left;
        padding-top: 5vw;
        width: 92vw;
        margin: 0px auto;
      }
    .nameTime{
      font-size: 12px;
      margin-top: 2vw;
      color: #666;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      padding-left: 5vw;
      text-align: left;
        span{
          float: right;
          padding-right: 5vw;
        }
    }
    .content{
      font-size: 13px;
      color: #333;
      margin: 0px auto;
      margin-top: 7vw;
      width: 100%;
      height: auto;
      letter-spacing: .5vw;
      text-align: left;
      line-height: 23px;

      overflow: hidden;
        img{
          width: 100% !important;
        }
    }
  }
  .imgWidth{
   width: 100% !important;
 }
@media screen and (max-width: 375px) and (min-width: 320px){
  .newsTitle{
    font-size: 18px !important;
  }
}
</style>
